﻿<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.3, maximum-scale=2.0, user-scalable=yes" />  
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
	<link rel="stylesheet" type="text/css" href="./css/css.css" />
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
	<div class="cont">
		<div class="background">
			<input type="file" id="fileBtn"  onchange="upload('#fileBtn');" accept="image/*" capture="camera" /><br />
		</div>
		<div class="list">
			<ul class="draw-list">
				<li class="frame"><img class="child-img" src="./img/1.jpg"></li>
				<li class="frame"><img class="child-img" src="./img/2.jpg"></li>
				<li class="frame"><img class="child-img" src="./img/3.jpg"></li>
			</ul>
		</div>
	</div>
</body>

<script type="text/javascript">
window.onload = function() {

	var upload = function(btn) {
	    var btn = document.querySelector(btn);
	    var file = btn.files[0];
	    var reader = new FileReader();

	   	reader.readAsDataURL(file);

	    reader.onload = function(e){
	        document.body.style.backgroundImage = 'url(' + e.target.result + ')';
	        document.body.style.backgroundSize = "100%";
	    };
	}
}
	
</script>
</html>